CSS_07_요소의 배치 방법

07_요소의 배치 방법_포지션(position)

포지션(position) 속성이란?
레이아웃 작업시 사용자가 부모요소 박스안에서 원하는 콘텐츠를 선택하여 배치하기 위한 속성으로서

1. static(요소가 가지고 있는 기본 위치값),
2. absolute(절대배치),
3. relatice(상대배치),
4. fixed(고정배치),
5. inherit(상속)의 종류가 있다.

포지션 속성 사용시 위치를 지정하기 위해 top, bottom, right, left속성을 사용함

포지션 속성을 사용하면 float속성처럼 콘텐츠끼리 겹침현상이 나타나는데, 겹친 요소들의 위, 아래 순서를 변경하기 위해 z-index속성을 사용해줌

z-index속성은 먼저 작성된 태그가 z-index값이 0이며, 나중에 작성된 태그 순서대로 번호가 자동으로 매겨짐.

absolute속성은 사용자가 선택한 요소를 브라우저의 왼쪽 상단을 기준으로 배치하고자 할 때 사용하며,
만약 감싸는 부모요소가(relative 속성일 때) 있을 경우 부모요소의 왼쪽 상단이 기준이 됨.

절대배치와는 다르게 현재 요소가 있는 위치가 기준이 되어 위치를 지정하고자 할 때 사용

고정 배치 방식은 사용자가 브라우저의 크기나 스크롤을 내릴 때 사용자가 지정한 위치에 멈추어 있듯이 고정 배치하는 방식임

자손